import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { useModel } from 'umi';
import DevGridRangeTap from './components/DevGridRangeTap';
import { LayoutB } from '~/public/cpas-ui';
import "./index.less";
import ProjectTreeTabsComponent from '@/pages/components/ProjectTreeTabsComponent';

const TableComponents1: React.FC<any> = React.forwardRef((props: any, ref) => {
  const { AccountTreeList, SubjectSDBData, SelectionJCData, timeData, AccountDataID, refreshSubject } = props;

  const { initialState } = useModel('@@initialState');
  const { dbname } = initialState?.curPart as API.CurPart;
  const { username } = initialState?.curUser as API.CurUser;
  const devDataGridRef = useRef<any>();//表格ref
  const projectTreeTabsComponentRef = useRef<any>();//表格ref


  const [curPhase, setCurPhase] = useState<any[]>([]);
  const [tableTimeData, setTableTimeData] = useState<string>('');

  useEffect(() => {
    if (SelectionJCData) {
      if (SelectionJCData === "全部") {
        setCurPhase(SubjectSDBData)
      } else if (SelectionJCData === "末级") {
        const DataFilter = SubjectSDBData.filter((item: any) => {
          return item.isEnd === true
        })
        setCurPhase(DataFilter)
      } else {
        const SliceData = Number(SelectionJCData.slice(0, 1))
        const DataFilter = SubjectSDBData.filter((item: any) => {
          return item.JC === SliceData
        })
        setCurPhase(DataFilter)
      }
    } else {
      setCurPhase(SubjectSDBData);
    }
    setTableTimeData(`${new Date().getTime()}`);
  }, [SelectionJCData, SubjectSDBData]);


  const rightDevData_fun = (nodeObj: any) => {
    const itemDataID = nodeObj.ID.replace(/[~|]/g, '\\$&');
    const pattern = new RegExp('^' + itemDataID, 'i'); // 创建正则表达式;
    const KMLXSDBData = SubjectSDBData.filter((item: any) => {
      return item.ID && pattern.test(item.ID);
    });
    setCurPhase(KMLXSDBData);
    setTableTimeData(`${new Date().getTime()}`);
  }


  useImperativeHandle(ref, () => ({

    ProjectTreeRef: (nodeObj: any) => {
      const rrrrTreeRef = projectTreeTabsComponentRef.current.treeRefFun();
      rrrrTreeRef?.treeRef.current.instance?.selectItem(nodeObj?.ID ?? '');
      rightDevData_fun(nodeObj);
    },
    DevGridRefStates: () => {
      return devDataGridRef.current.DevGridRefState();
    },
  }));

  function leftContainer() {
    return (
      <div style={{ margin: "8px", height: "100%" }}>
        <ProjectTreeTabsComponent
          ref={projectTreeTabsComponentRef}
          AccountDataID={AccountDataID}
          treeSelectNodeFunc={(nodeObj: any) => {
            rightDevData_fun(nodeObj);
          }}
          treeTabsReloadFunc={() => {
            refreshSubject(true);
          }}
          AccountTreeList={AccountTreeList} />
      </div>
    );
  }
  // 表格结构
  function rightContainer() {
    return (
      <div style={{ margin: "7px 7px 7px 10px", height: "100%" }}>
        <DevGridRangeTap
          ref={devDataGridRef}
          SubjectSDBData1={curPhase}
          curTableDataChangeTime={tableTimeData}
        />
      </div>
    )
  }

  return (
    <div
      style={{
        height: 'calc(100vh - 97px)',
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
      }}
    >
      {useMemo(() => {
        return <div className='audit-paper' >
          <LayoutB
            rowSize={["10%", "300px", "80%"]}
            leftSlot={leftContainer()}
            rightSlot={rightContainer()}
          />
        </div>
      }, [tableTimeData, AccountDataID])}

    </div >
  )
});

export default TableComponents1;

